<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1">
	<title></title>
	<style>
		body {
			margin: 0;
		}

		.img1 {
			width: 400px;
			height: 400px;
		}

		html {
			font-size: 13.333333333333334vw;
		}

		div {
			/* width: 20vw; */
			/* 150px */
			width: 1.5rem;
			height: 10rem;
			background: green;
		}

		/*
			150/(750/100)

			1.5*?rem=20vw	=>?=20vw/1.5=13.333333333333334vw
		 */
	</style>
</head>

<body>
	<!-- 
		陈学辉
			移动端开发的工作
				1、移动站
				2、Hybrid App(混合app)

			移动端系统
				1、ios
				2、android
			移动端浏览器

		屏幕尺寸
			1、像素
				1、物理像素（设备像素）		pt
					在手机上指的是分辨率
						750*1334
				2、CSS像素			px
			2、屏幕尺寸
			3、PPI		像素密度
			4、像素比（DPR）
				设备像素与css像素之间的比。它的本质是1个css像素占用多少个设备像素
				像素比=物理像素/CSS像素
				2=750/? 375

			5、视口
			6、适配
				vw+rem
	 -->

	<!-- <img src="images/img_01.png" class="img1" alt=""> -->

	<div></div>

	<script>
		console.log(window.devicePixelRatio);	//像素比
		console.log(document.documentElement.clientWidth);
	</script>
</body>

</html>